<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #yanzheng{
            display: inline-block;
            width: 60px;
            height: 20px;
            background: rgb(231, 230, 230);
            border: solid 1px ;
            text-align: center;
            line-height: 20px;
        }
    </style>
</head>
<body>
    <!-- 1.验证码匹配的问题 -->
    输入用户名：<input type="text" id="txt1"><br>
    输入密码&ensp;&ensp;：<input type="password" id="txt2"><br>
    输入验证码：<input type="text" id="txt">
    <div id="yanzheng">1234</div><br>
    <input type="button"  value="提交" id="btn"><br>

    <!-- 2.封装一个十六进制的随机颜色 函数 -->
    <button id="colorChange">切换背景色</button>
</body>
<script>
    // 斐波那契数列
    // 1、1、2、3、5、8、13、21、34...
    function fn(n){
        // 设置终止条件
        if(n===1||n===2){
            return 1;
        }else{
            // 找出递归规律
            return fn(n-1)+fn(n-2);
        }
    }
    // 把斐波那契数列打印出来
    for(var i= 1; i<=9;i++){
        console.log(fn(i));
    }

    // 验证码匹配的问题
    var btn = document.getElementById("btn")
    btn.onclick = function(){
        // 每点击一次btn获取一次输入框txt
        var txt = document.getElementById("txt")
        var txt1 = document.getElementById("txt1")
        var txt2 = document.getElementById("txt2")
        // 判断输入框的内容与验证码上的数字是否一样
        if(txt.value !== yz.innerHTML){
            alert("验证码错误");
            // 清空错误验证码
            txt.value = "";
            // 输入错误时自动切换验证码
            yz.innerHTML = "" +randomNum(0,9)+randomNum(0,9)+randomNum(0,9)+randomNum(0,9);
        }else if( txt1.value == "" || txt2.value == ""){
            alert("请输入用户名与密码")
        }else{
            alert("提交成功");
        }
    }
    var yz = document.getElementById("yanzheng");
    // 手动点击验证码处切换验证码
    yz.onclick = function(){
        // 切换验证码，由4为随机数组成
        yz.innerHTML = "" + randomNum(0,9)+randomNum(0,9)+randomNum(0,9)+randomNum(0,9);
    }
    // 0~9的随机数字
    function randomNum(min,max){
        return parseInt(Math.random()*(max-min+1)+min);
    }
    randomNum(0,9);

    // 封装一个十六进制的随机颜色 函数
    var colorChange = document.getElementById("colorChange");
    function randomColor(min,max){
        // 点击按钮切换颜色
        colorChange.onclick = function(){
            var res = "#";
            // 循环6次随机数字
            for(var i=0; i<6;i++){
                // 将0~15的随机数字转成十六进制
                var num = (parseInt(Math.random()*(max-min)+1)+min).toString(16);
                // 将随机的数字累加在一起
                res += num;
            }
            // 打印十六进制随机颜色
            console.log(res)
            document.body.style.background = res;
        }
    }
    randomColor(0,15)
</script>
</html>